<template>
  <transition name='toast-show'>
    <div class="toast-wrapper"
         v-show="dispay">
      <p>{{message}}</p>
    </div>
  </transition>

</template>

<script>
export default {
  data () {
    return {
      message: "加载中",
      dispay: false
    }
  },
  methods: {
    show (val) {
      this.message = val
      this.dispay = true
      this.$nextTick(() => {
        this.dispay = false
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.toast-wrapper {
  position: fixed;
  left: 10%;
  top: 42%;
  width: 80%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.72);
  border-radius: 6px;
  padding: 20px 20px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  opacity: 1;
  z-index: 3000;
}
.toast-show-leave-active {
  transition: opacity 3.6s ease-in;
}
.toast-show-leave-to {
  opacity: 0;
}
</style>